<template>
  <div class="v-collapse">
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { ref, provide, watch } from 'vue'
import type { NameType, CollapseProps, CollapseEmits } from './types'
import { collapseContextKey } from './types'

defineOptions({ name: 'VCollapse' })

const props = defineProps<CollapseProps>()
// const collapseProps = ref(props)
const emits = defineEmits<CollapseEmits>()

const activeNames = ref<NameType[]>(ref(props).value.modelValue)
watch(
  () => props.modelValue,
  () => {
    activeNames.value = props.modelValue
  }
)
if (props.accordion && activeNames.value.length > 1) {
  console.warn('accordion mode should only have one active item')
}
const handleItemClick = (item: NameType) => {
  let _activeNames = [...activeNames.value]

  if (props.accordion) {
    _activeNames = [activeNames.value[0] === item ? '' : item]
    // activeNames.value = _activeNames
  } else {
    const index = _activeNames.indexOf(item)
    if (index > -1) {
      //  存在,删除对应的一项
      _activeNames.splice(index, 1)
    } else {
      // 不存在, 插入对应的 name
      _activeNames.push(item)
    }
    // activeNames.value = _activeNames
  }
  activeNames.value = _activeNames
  emits('update:modelValue', _activeNames)
  emits('change', _activeNames)
}

provide(collapseContextKey, { activeNames, handleItemClick })
</script>

<style scoped></style>
